<template>
    <div class="userOrderContainer">
        <div v-show="gotSomething">
            <el-card
                :body-style="{ padding: '4px',width:'100%' }"
                v-for="(item, index) in orderList"
                :key="index"
                shadow="always"
            >
                <div @click="goDetail(item)" class="imgcontainer">
                    <el-image :src="item.goods.goodCoverImg"></el-image>
                </div>
                <div class="cardInfos">
                    <div class="goodname">
                        <div>
                            <b>商品名称:</b>
                            <span>{{item.goods.goodName}}</span>
                        </div>
                        <span>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="removeOrder(item,index)"
                            >移除订单</el-button>
                        </span>
                    </div>
                    <div class="ordernum">
                        <div>
                            <b>订单编号:</b>
                            <span>{{item.ordernum}}</span>
                        </div>
                        <span>
                            <el-link
                                :type="switchList[index].status?'success':'info'"
                            >{{switchList[index].status?'加入结算':'剔除结算'}}</el-link>
                            <el-switch
                                v-model="switchList[index].status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="switchChanged"
                            ></el-switch>
                        </span>
                    </div>
                    <div class="goodprice">
                        <b>商品价格:</b>
                        <span style="color:red;">{{item.goods.goodPrice}}￥</span>
                    </div>
                    <div class="goodnums">
                        <b>购买数量:</b>
                        <span>
                            <el-input-number
                                v-model="item.goodsnums"
                                controls-position="right"
                                @change="handleChange"
                                :min="1"
                                :max="item.goods.goodNums"
                                size="mini"
                            ></el-input-number>
                        </span>
                    </div>
                    <div class="orderstatus">
                        <b>订单状态:</b>
                        <span>{{item.status | statusFilter}}</span>
                    </div>
                    <div class="ordership">
                        <b>订单免运:</b>
                        <span>{{item.goods.goodShipFree?'免运费':'15￥'}}</span>
                    </div>
                    <div class="deleveraddress">
                        <b>收货信息:</b>
                        <span>
                            <el-link
                                @click="selectAdress(item.deliveraddress,index)"
                            >{{item.deliveraddress==null?'未填写':item.deliveraddress.address}}</el-link>
                        </span>
                    </div>
                </div>
            </el-card>
        </div>
        <div v-show="!gotSomething" class="whennone">
            <el-link @click="goproducts" style="font-size:20px" type="primary">空空,去逛逛吧~！</el-link>
        </div>
        <div class="totalContainer">
            <div class="totalInner">
                <b>总计:</b>
                <span>{{totalCost}}￥</span>
            </div>
            <div class="totalInner">
                <b>件数:</b>
                <span>{{totalNums}}</span>
            </div>
            <div class="totalInner">
                <el-button
                    :disabled="totalCost==0?true:false"
                    size="mini"
                    type="success"
                    @click="Pay"
                >去结算</el-button>
            </div>
        </div>
        <!-- 收货地址操作弹出框 -->
        <el-dialog title="用户收货地址列表" :visible.sync="centerDialogVisible" width="60%" center>
            <div class="dialogContent">
                <el-table ref="filterTable" :data="tableData" checkbox style="width: 100%">
                    <el-table-column
                        prop="contactname"
                        label="收货人"
                        sortable
                        width="180"
                        column-key="date"
                    ></el-table-column>
                    <el-table-column prop="mobile" label="联系电话" width="180"></el-table-column>
                    <el-table-column prop="address" label="收货地址"></el-table-column>
                    <el-table-column prop="title" label="标签" width="100">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.tag === '家' ? 'primary' : 'success'"
                                disable-transitions
                            >{{scope.row.title}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tag" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button
                                @click="chioseAddressForOrder(scope.row,scope.$index)"
                                size="mini"
                                type="primary"
                            >选择</el-button>
                            <el-button
                                @click="removeAddress(scope.row,scope.$index)"
                                size="mini"
                                type="danger"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addAddress" icon="el-icon-plus">添加地址</el-button>
            </span>
            <!-- 内层dialog--添加收货地址 -->
            <el-dialog
                width="50%"
                title="添加收货地址"
                :visible.sync="innerVisible"
                append-to-body
                center
            >
                <div class="addadressContainer">
                    <el-form label-width="80px" :model="addForm">
                        <el-form-item label="收货人">
                            <el-input v-model="addForm.contactname"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="addForm.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="addForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="标签">
                            <el-input v-model="addForm.title"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        size="small"
                        type="danger"
                        @click="innerVisible=false"
                        icon="el-icon-close"
                    >取消</el-button>
                    <el-button
                        size="small"
                        type="primary"
                        @click="ComfirmAddAddress"
                        icon="el-icon-check"
                    >保存</el-button>
                </span>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderList: [],
            selectOrderListIndex: null,
            orderNums: 1,
            switchList: [],
            totalCost: 0,
            totalNums: 0,
            centerDialogVisible: false,
            innerVisible: false,
            tableData: [],
            addForm: {
                contactname: null,
                mobile: null,
                address: null,
                title: null
            },
            gotSomething: true
        };
    },
    methods: {
        // 点击图片跳到详细页
        goDetail(item) {
            this.$router.push({ name: "details", params: { id: item.id } });
        },
        // 去逛逛
        goproducts() {
            this.$router.push({ name: "products" });
        },
        // 获取用户订单列表
        getUserOrderList() {
            this.switchList = [];
            let target = this.$store.getters.getUserOrderList;
            //console.log(target);
            if (target.length > 0) {
                this.gotSomething = true;
                for (let i = 0; i < target.length; i++) {
                    let obj = { status: true };
                    this.switchList.push(obj);
                }
                this.orderList = target;
                this.orderList.forEach(item => {
                    this.totalCost += item.goodsnums * item.goods.goodPrice;
                    this.totalNums += item.goodsnums;
                });
            } else {
                this.gotSomething = false;
            }
        },
        // 商品数量选择框改变
        handleChange(value) {
            this.totalNums = 0;
            this.totalCost = 0;
            this.orderList.forEach(item => {
                // console.log(item.goodsnums);
                // console.log(item.goods.goodPrice);
                this.totalNums += item.goodsnums;
                this.totalCost += item.goodsnums * item.goods.goodPrice;
            });
        },
        // 删除订单
        removeOrder(item, index) {
            this.$ajax
                .delete("order/" + item.id)
                .then(res => {
                    //console.log(res.data);
                    this.orderList.splice(index, 1);
                    this.$store.commit("updateUserOrderList", this.orderList);
                    this.$message({
                        message: "移除成功!",
                        type: "success"
                    });
                })
                .catch(err => {
                    console.log("remove -- eeror");
                });
        },
        // switch changed
        switchChanged(val) {
            this.totalCost = 0;
            this.totalNums = 0;
            this.switchList.forEach((item, index) => {
                if (item.status) {
                    let cost =
                        this.orderList[index].goodsnums *
                        this.orderList[index].goods.goodPrice;
                    this.totalCost += cost;
                    this.totalNums += this.orderList[index].goodsnums;
                } else {
                }
            });
        },
        // 选择收货地址
        selectAdress(addObj, index) {
            this.centerDialogVisible = true;
            this.tableData = this.$store.getters.getUserAddress;
            this.selectOrderListIndex = index;
        },
        // 最总结算
        Pay() {
            //console.log(this.orderList);
            let flag = [];
            this.orderList.forEach((item, index) => {
                if (item.deliveraddress == null) {
                    flag.push(index);
                }
            });
            if (flag.length > 0) {
                flag.forEach(item => {
                    this.$notify({
                        message: `第${item + 1}条订单未填写收货地址哦！`
                    });
                });
            } else {
                // 所有订单都已经填写了收货地址--信息完整
                this.$notify({
                    message: "结算中。。。",
                    type: "success"
                });
            }
        },
        //添加地址
        addAddress() {
            this.innerVisible = true;
        },
        // 确认添加收货地址
        ComfirmAddAddress() {
            this.$ajax
                .post("useraddress/", this.addForm)
                .then(res => {
                    //console.log(res.data);
                    this.tableData.push(res.data);
                    this.$store.commit("updateUserAddress", this.tableData);
                    this.$message({
                        message: "添加成功!",
                        type: "success"
                    });
                    this.innerVisible = false;
                })
                .catch(err => {
                    console.log("add-address -- error");
                });
        },
        // 选择订单收货地址
        chioseAddressForOrder(row, index) {
            let ids = this.orderList[this.selectOrderListIndex].id;
            let putData = this.orderList[this.selectOrderListIndex];
            //console.log(putData);
            //console.log(this.orderList);

            putData.deliveraddress = row.id;
            putData.goods = this.orderList[this.selectOrderListIndex].goods.pk;
            this.$ajax
                .put("order/" + ids + "/", putData)
                .then(res => {
                    this.orderList[this.selectOrderListIndex].deliveraddress =
                        res.data;

                    //console.log(this.orderList[this.selectOrderListIndex].goods);

                    this.$ajax.get("order/").then(res => {
                        this.$store.commit(
                            "updateUserOrderList",
                            res.data.results
                        );
                        this.orderList = res.data.results;
                    });
                    this.centerDialogVisible = false;
                })
                .catch(err => {
                    console.log("update--address --error");
                });
        },
        // 删除收货地址
        removeAddress(row, index) {
            this.$ajax
                .delete("useraddress/" + row.id)
                .then(res => {
                    //console.log(res.data);
                    this.tableData.splice(index, 1);
                    this.$store.commit("updateUserAddress", this.tableData);
                })
                .catch(err => {
                    console.log("remove--address -- error");
                });
        }
    },
    mounted() {
        this.getUserOrderList();
    }
};
</script>


<style lang="scss" scoped>
.userOrderContainer {
    .whennone {
        width: auto;
        height: 350px;
        background-color: #ccc;
        text-align: center;
        display: flex;
        opacity: 0.5;
        border-radius: 5px;
        flex-direction: column;
        justify-content: center;
        font-size: 18px;
    }
    .el-card {
        margin: 8px;
        display: flex;
        .imgcontainer {
            float: left;
            width: 22%;
            height: 200px;
            .el-image {
                width: 100%;
                height: 100%;
            }
        }

        .cardInfos {
            font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
                "微软雅黑", Arial, sans-serif;
            float: left;
            width: 76%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            opacity: 0.8;
            .goodname {
                display: flex;
                justify-content: space-between;
            }
            .ordernum {
                display: flex;
                justify-content: space-between;
            }
            b {
                font-size: 13px;
            }
            span {
                font-size: 14px;
                opacity: 1;
            }
        }
    }
    .totalContainer {
        font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
            "微软雅黑", Arial, sans-serif;
        min-width: 550px;
        height: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-around;
        .totalInner {
            b {
                font-size: 14px;
            }
            span {
                font-size: 15px;
                color: red;
            }
        }
        .totalInner:nth-child(1) {
            width: 30%;
        }
        .totalInner:nth-child(2) {
            width: 30%;
        }
        .totalInner:nth-child(2) {
            width: 40%;
        }
    }
}
</style>